.m-scene {
    position: relative;
    margin: auto;
    height: 100%;
    max-width: 414px;
    background: linear-gradient(to top, #d6bf78 9rem, green 12rem, lightgreen 17rem, skyblue 21rem, blue);
    overflow: hidden;

    .clouds {
        position: relative;

        .cloud {
            width: 100%;
            height: 10rem;
            background: url('../../assets/img/cloud.webp') no-repeat center;
            background-size: contain;
        }

        .m-moving:nth-child(1) {
            transform: scaleY(.7);
            transform-origin: top;
            opacity: .63;
        }

        .m-moving:nth-child(2) {
            position: absolute;
            width: 100%;
            height: 10rem;
            top: 12%;
            filter: brightness(0.9) hue-rotate(80deg);
        }
    }


    .car {
        position: absolute;
        width: 16rem;
        height: 12rem;
        bottom: 8rem;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        transition: 6s;
        z-index: 1; // 防止倒车时下水道井盖高于汽车

        .carBase,
        .carColor {
            width: 100%;
            height: 100%;
            position: absolute;
            background-size: contain;
        }

        .carBase {
            background-image: url('../../assets/img/car.png');
        }

        .carColor {
            background-image: url('../../assets/img/car_color.png');
        }

        .carNum {
            position: absolute;
            top: 7.125rem;
            left: 6rem;
            width: 4.75rem;
            height: 1.25rem;
            line-height: 1.25rem;
            text-align: center;
            font-size: 0.9375rem;
            color: #fff;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: url(/src/assets/img/carNum.png);
            transform: scaleX(.88);

            .dot {
                display: inline-block;
                margin: 0 -.125rem; // 兼容微信浏览器
                width: .5rem;
            }
        }

        &.isCarRun {
            bottom: 4rem;
            transform: translateX(-50%) scale(1.4);
            z-index: 1;
        }
    }

    .birds {
        position: absolute;
        width: 100%;
        transform: rotateY(180deg) rotateZ(8deg);
        bottom: 63%;

        .flyingBird {
            position: absolute;
            width: 5rem;
            height: 5rem;
            transform: rotateY(180deg);
            background: url('../../assets/img/birdFly_matting.gif') no-repeat center;
            background-size: contain;
            top: -2rem;
        }

        .m-moving:nth-of-type(2) {
            transform: rotateZ(7deg);
            top: -4rem;
        }
    }

    .trees {
        position: absolute;
        bottom: 6rem;
        width: 100%;

        .tree1,
        .tree2 {
            background: url('../../assets/img/tree.png') no-repeat center;
            background-size: contain;
            position: absolute;

            &.tree1 {
                width: 5rem;
                height: 5rem;
                left: 1rem;
                bottom: 12rem;
            }

            &.tree2 {
                width: 14rem;
                height: 14rem;
                right: -3rem;
                bottom: 8rem;
            }
        }
    }


    .liftingLever {
        position: absolute;
        left: 1rem;
        bottom: 8rem;
        z-index: 1;

        &.isCarRun {
            z-index: 0;
        }

        .bar {
            position: absolute;
            left: 1.5rem;
            bottom: 4.5rem;
            transform-origin: left;
            transition: transform ease 2s;

            .box {
                transform: rotateX(-10deg) !important;
                transition: transform ease 2s;

                &>div {
                    background: #f5d9c0;
                }

                .top,
                .bottom {
                    background: #f3e1d0;
                }

                .front {
                    background: url(../../assets/img/barPic.png);
                    background-size: contain
                }
            }
        }

        &.up {
            .bar {
                transform: rotate(-90deg);

                .box {
                    transform: rotateX(12deg) !important;

                }

            }
        }



        .platform {
            position: absolute;
            bottom: 0;

            .box {
                &>div {
                    background: #ff8e42;
                }

                .top,
                .bottom {
                    background: #fa9451;
                }

                .front {
                    text-align: center;
                }
            }
        }


    }

    .wellCover {
        position: absolute;
        width: 5rem;
        height: 5rem;
        transform: scaleY(0.5);
        background: url(/src/assets/img/wellCover.png) no-repeat center;
        background-size: contain;
        bottom: 3rem;
        right: 2rem;
    }

    @keyframes rotate {
        from {
            transform: rotate(0);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .btnColor {
        position: absolute;
        top: 2rem;
        right: 0;
        padding: .25rem;
        background: dodgerblue;
        border-radius: 50%;
        border-width: .125rem;
        border-style: outset;
        border-color: #767676;

        &.rotate {
            animation: rotate 3.3s ease-in-out;
            animation-iteration-count: infinite;
        }

        &:active {
            background: blue;
        }

        i {

            color: #fff;
            font-size: 1.5rem;
        }
    }

    .editPanel {
        background: rgba(0, 0, 0, .3);
        position: absolute;
        top: 0;
        padding: .5rem;
        color: white;
        border-radius: .5rem;

        h4 {
            margin: .5rem 0 .25rem;
            text-align: center;
        }

        .carNumInput {
            input:nth-child(1) {
                width: 2rem;
            }

            input:nth-child(2) {
                width: 5rem;
            }
        }
    }

    .ctrl {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 10;
        width: 100%;

        .btnGroup {
            display: flex;

            button {
                flex: 1;
                padding: 0;
                font-size: 1.0625rem;
                line-height: 2rem;
                color: #fff;
                background: dodgerblue;
            }
        }

    }

}